<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <link rel="stylesheet" href="bootstrap.min.css">
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script> -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <style type="text/css">
        /* Style to reverse the caret icon from pointing downwards t upwards */
        .caret.caret-up {
            border-top-width: 0;
            border-bottom: 4px solid #fff;
        }
        .dropdown-submenu {
            position: relative;
        }
        .dropdown-submenu .dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -1px;
        }
    </style>
</head>
<body>
    <div class="container" id="container">
        <h2>Change the caret icon to upside down</h2>
        <p>The following example changes the caret icon from pointing downwards to upwards when clicking on the dropdown:</p>
        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="javascript:;">HTML</a></li>
                <li><a href="javascript:;">CSS</a></li>
                <li><a href="javascript:;">JavaScript</a></li>
            </ul>
        </div>

        <h2>Navbar With Dropdown</h2>
        <p>The following example adds a dropdown menu for a button in the navigation bar:</p>
    </div>

    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="javascript:;">WebSiteName</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="javascript:;">Home</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;">Page 1 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="javascript:;">Page 1-1 </a></li>
                        <li><a href="javascript:;">Page 1-2 </a></li>
                        <li><a href="javascript:;">Page 1-3 </a></li>
                    </ul>
                </li>
                <li><a href="javascript:;">Page 2</a></li>
                <li><a href="javascript:;">Page 3</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;">Login <span class="glyphicon glyphicon-log-in"></span></a>
                    <ul class="dropdown-menu">
                        <form class="form container-fluid" id="formLogin" action="javascript:;">
                            <div class="form-group">
                                <label for="usr">Name:</label>
                                <input class="form-control" type="text" id="usr" name="usr">
                            </div>
                            <div class="form-group">
                                <label for="pwd">Password:</label>
                                <input class="form-control" type="password" id="pwd" name="pwd">
                            </div>
                            <button class="btn btn-block" type="button" id="btnLogin">Login</button>
                        </form>
                        <div class="container-fluid">
                            <br><a class="small" href="javascript:;">Forgot password?</a>
                        </div>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>

    <div class="container" id="container1">
        <h2>Multi-Level Dropdowns</h2>
        <p>In this example, we use jQuery to open multi-level dropdowns on click:</p>
        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a tabindex="-1" href="javascript:;">HTML</a></li>
                <li><a tabindex="-1" href="javascript:;">CSS</a></li>
                <li>
                    <a class="test" tabindex="-1" href="javascript:;">New dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a tabindex="-1" href="javascript:;">2nd level dropdown</a></li>
                        <li><a tabindex="-1" href="javascript:;">2nd level dropdown</a></li>
                        <li>
                            <a class="test" href="javascript:;">Another dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:;">3rd level dropdown</a></li>
                                <li><a href="javascript:;">3rd level dropdown</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    
    <hr>

    <div class="container" id="container2">
        <p>In this example, we have created a custom <code>.dropdown-submenu</code> class for multi-level dropdowns:</p>
        <h2>Multi-Level Dropdowns</h2>
        <p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns.</p>
        <p>Note that we have added jQuery to open the multi-level dropdown on click.</p>
        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a tabindex="-1" href="javascript:;">HTML</a></li>
                <li><a tabindex="-1" href="javascript:;">CSS</a></li>
                <li class="dropdown-submenu">
                    <a class="test" tabindex="-1" href="javascript:;">New dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a tabindex="-1" href="javascript:;">2nd level dropdown</a></li>
                        <li><a tabindex="-1" href="javascript:;">2nd level dropdown</a></li>
                        <li class="dropdown-submenu">
                            <a class="test" href="javascript:;">Another dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:;">3rd level dropdown</a></li>
                                <li><a href="javascript:;">3rd level dropdown</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

    <script src="//ajax.googleapis.bootcss.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            // for #container
            $("#container .dropdown").on("hide.bs.dropdown", function() {
                $("#container .btn").html('Dropdown <span class="caret"></span>');
            });
            $("#container .dropdown").on("show.bs.dropdown", function() {
                $("#container .btn").html('Dropdown <span class="caret caret-up"></span>');
            });

            // for #container1
            $("#container1 .dropdown a.test").on("click", function(e) {
                $(this).next('ul').toggle();
                e.stopPropagation();
                e.preventDefault();
            });

            // for #container2
            $("#container2 .dropdown-submenu a.test").on("click", function(e) {
                $(this).next('ul').toggle();
                e.stopPropagation();
                e.preventDefault();
            });
        });
    </script>
</body>
</html>
